<!-- 活动详情-浏览记录 -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="关键词:">
          <a-input v-model="queryParam.keyWord" placeholder="姓名/手机号/单位" allowClear />
        </a-form-item>
        <a-form-item label="用户类型:">
          <a-select v-model="queryParam.applyType" placeholder="请选择用户类型" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('applyTypeDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="报名状态:">
          <a-select v-model="queryParam.isRegister" placeholder="请选择报名状态" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('registerStatusDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="公众号:">
          <a-select v-model="queryParam.isOfficialAccount" placeholder="请选择" allowClear class="min-width-10">
            <a-select-option
              v-for="dict in Dict.getLocal('isOfficialAccountDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <s-table size="default" ref="table" rowKey="userId, title" :rowSelection="null" :columns="columns" :data="loadData">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.size + parseInt(index) + 1 }}
      </span>

      <!-- 头像昵称 -->
      <span slot="user" slot-scope="text, record">
        <div class="disFlxAC">
          <a-avatar size="default" icon="user" :src="record.leadingAvatar" />
          <!-- <img :src="record.leadingAvatar" style="width: 30px; height: 30px; border-radius: 50%" alt="" /> -->
          <div class="_ml-10">
            <div>{{ record.leadingName }}</div>
            <div>{{ record.phone }}</div>
          </div>
        </div>
      </span>

      <!-- 用户类型 -->
      <span slot="applyType" slot-scope="text, record">
        <DictTag :options="Dict.getLocal('applyTypeDict')" :value="record.applyType" isText showBorder />
      </span>

      <!-- 公众号关注状态 -->
      <span slot="isOfficialAccount" slot-scope="text">
        <DictTag :options="Dict.getLocal('isOfficialAccountDict')" :value="text" isText />
      </span>

      <!-- 浏览次数 -->
      <span slot="num" slot-scope="text"> {{ text }}次 </span>

      <!-- 报名情况 -->
      <span slot="isRegister" slot-scope="text">
        <DictTag :options="Dict.getLocal('registerStatusDict')" :value="text" />
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { BrowseSet, browseList } from '@/api/activity/activity'
import DictTag from '@/components/DictTag'

export default {
  props: ['activityId', 'appUserInfoId'],
  components: {
    STable,
    DictTag
  },
  data() {
    return {
      pagination: {
        current: 1,
        size: 10
      },
      visible: false,
      // 查询参数
      queryParam: {
        keyWord: undefined,
        applyType: undefined,
        isRegister: undefined,
        isOfficialAccount: undefined
      },
      // 活动表单
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: 80
        },
        {
          title: '用户',
          scopedSlots: { customRender: 'user' },
          width: 150
        },
        {
          title: '单位名称',
          dataIndex: 'companyName',
          width: 180
        },
        {
          title: '单位职务',
          dataIndex: 'socialPosition',
          width: 100
        },
        {
          title: '用户类型',
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: 'applyType' }
        },
        {
          title: '公众号',
          dataIndex: 'isOfficialAccount',
          width: 120,
          scopedSlots: { customRender: 'isOfficialAccount' }
        },
        {
          title: '最后浏览时间',
          dataIndex: 'lastTime',
          width: 120,
          ellipsis: true
        },
        {
          title: '浏览次数',
          dataIndex: 'num',
          width: 100,
          scopedSlots: { customRender: 'num' }
        },
        {
          title: '报名情况',
          dataIndex: 'isRegister',
          width: 120,
          scopedSlots: { customRender: 'isRegister' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.pagination = {
          current: parameter.current,
          size: parameter.pageSize
        }
        if (this.appUserInfoId) {
          return browseList(
            Object.assign(this.pagination, this.queryParam, {
              activityId: this.activityId,
              appUserInfoId: this.appUserInfoId
            })
          )
        }
        return BrowseSet(
          Object.assign(this.pagination, this.queryParam, {
            sourceId: this.activityId,
            type: 4
          })
        )
      },
      selectedRows: [],
      browseNum: 0
    }
  },
  created() {},
  methods: {
    handleReload() {
      this.$refs.table.refresh()
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style  lang="less">
.ant-avatar.ant-avatar-icon {
  flex-shrink: 0;
  flex-grow: 0;
}
</style>
